<template>
  <!-- 作业票-作业类型 -->
  <view class="apply-ticket-list" :class="{ 'is-btn-group': btnVisible }">
    <view class="cu-card-wrap" v-for="(item, index) in data" :key="item.workId">
      <view class="header-wrap">
        <view class="title-wrap">
          <text class="title">{{ item.ticketCode }}</text>
        </view>
      </view>
      <view class="affix">
        <image
          class="affix-icon"
          :src="`/static/images/ticket-type/work-type-${item.workTypeFlag}.png`"
          mode="aspectFit"
        />
      </view>
      <view class="body-wrap">
        <view class="content-wrap">
          <view class="label">作业地点：</view>
          <view class="value">{{ item.operationPoint }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">作业单位：</view>
          <view class="value">{{ item.unitName }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">作业负责人：</view>
          <view class="value">{{ item.directorName }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">风险辨识结果：</view>
          <view class="value">{{ item.riskIdentificationResult }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">填写状态：</view>
          <view class="value">
            <text v-if="item.ticketId || (item.ticketInfo && Object.keys(item.ticketInfo).length)" class="text-success">
              已填写
            </text>
            <text v-else class="text-error">未填写</text>
          </view>
        </view>
      </view>
      <view class="footer-wrap">
        <view class="button-wrap button-wrap-todo">
          <view class="button-wrap-left"> </view>
          <view class="flex">
            <view v-if="item.ticketId" class="button" @click="view(item)">查看</view>
            <view v-else-if="directorFlag === 'Y'" class="button" @click="fill(item, index)">填写</view>
            <view
              v-if="
                (!item.ticketId && !item.workId) ||
                (item.ticketId && item.workId) ||
                (!item.ticketId && item.ticketInfo && Object.keys(item.ticketInfo).length > 0)
              "
              class="button"
              @click="cancel(item, index)"
              >取消</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import { getWorkflowTemplate } from '../../../../api/spw/workflow'
import { showConfirm } from '../../../../utils/common'
import { APP_ID } from '@/utils/constant'

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    projectInfo: {
      type: Object,
      default: () => {}
    },
    directorFlag: {
      type: String,
      default: ''
    },
    btnVisible: Boolean
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: null,
      isFinished: false,
      type: 0,
      dataParam: {},
      curIndex: ''
    }
  },
  computed: {
    ...mapGetters(['staffId'])
  },
  onBackPress(options) {
    if (options.from === 'backbutton') {
      this.back()
      return true
    }
  },
  onReachBottom() {
    this.pageNum++
    this.getList()
  },
  methods: {
    dayjs,
    back() {
      uni.reLaunch({
        url: '/pages/work/index'
      })
    },

    initData() {
      this.isFinished = false
      this.pageNum = 1
      this.pageSize = 10
      this.total = null
      this.getList()
    },

    async fill(row, idx) {
      this.curIndex = idx
      const proc = await getWorkflowTemplate({
        actAppId: APP_ID.SPW,
        areaId: row.areaId,
        bizCategoryFlag: 'SPECIAL_WORK',
        bizCategorySubFlag: row.workTypeFlag
      })
      if (!proc.data?.procDefId) {
        this.$modal.showToast(`未创建 ${row.areaName} 使用的 ${row.workTypeLabel} 流程，请联系管理员创建。`)
        return
      }

      uni.navigateTo({
        url: `/pages/jobSlip/apply/special-work?procDefId=${proc.data.procDefId}&templateId=${proc.data.templateId}&workTypeFlag=${row.workTypeFlag}`,
        events: {
          'ticket:form:success': (data) => {
            this.onTicketSuccess(data)
          }
        },
        success: (res) => {
          res.eventChannel.emit('ticketDataTicketFromOpenerPage', {
            rowData: row,
            procDefId: proc.data.procDefId,
            template: 'data'
          })
        }
      })
    },

    cancel(row, index) {
      showConfirm('已填写内容将清除，确定取消?').then((res) => {
        if (res.confirm) {
          if (!row.ticketId && !row.workId) {
            this.data.splice(index, 1)
          } else if (row.workId) {
            if (row.ticketId) {
              this.data[index].ticketId = ''
            } else {
              this.data[index].ticketInfo = {}
              // ticketData.value = {}
            }
          }
        }
      })
    },

    onTicketSuccess(fillData) {
      const ticketIndex = this.data.findIndex((pet) => pet.workId === fillData.workId)
      if (ticketIndex === -1) {
        this.$set(this.data, this.data.length, {
          ...fillData,
          newTicket: false
        })
      } else {
        Object.keys(this.data[this.curIndex]).map((k) => {
          this.data[this.curIndex][k] = fillData[k]
        })
        this.$set(this.data[this.curIndex], 'ticketInfo', fillData)
      }
    },

    view({ ticketId }) {
      let url = `/pages/jobSlip/detail/index?ticketId=${ticketId}`
      const _this = this
      uni.navigateTo({
        url,
        events: {
          reloadEvent: function (isReload) {
            if (isReload) {
              _this.initData()
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-ticket-list {
  /* #ifdef H5 */
  height: calc(100vh - 95px);
  /* #endif */
  /* #ifdef APP-VUE */
  height: calc(100vh - 50px);
  /* #endif */
  overflow-y: auto;
  &.is-btn-group {
    /* #ifdef H5 */
    height: calc(100vh - 120px);
    /* #endif */
    /* #ifdef APP-VUE */
    height: calc(100vh - 150px);
    /* #endif */
  }
}
.grid-body {
  background-color: transparent;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.items-center {
  align-items: center;
}

.info-btn {
  flex-shrink: 0;
  margin-right: 0px;
  margin-left: 10px;
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    .text-label {
      display: flex;
      word-break: keep-all;
      color: #999;
      max-width: 35%;
    }

    text {
      color: #333;
      display: inline-block;
      word-break: break-all;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1rpx solid #d5d7e3;
  }
}

.button-wrap-todo {
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .button-wrap-left {
    display: flex;
    align-items: center;

    > view {
      margin-right: 16rpx;
      margin-left: 0;
    }
  }
}

.affix {
  //width: 90px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
}

uni-image.affix-icon {
  height: 30px !important;
  width: 78px !important;
}

.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  //margin-bottom: 24rpx;
  position: relative;
  margin: 10px 15px;

  &:first-child {
    margin-top: 24rpx;
  }
}
</style>
